<template>
  <div>
    <div>
      <div class="mat-content-pane">
        <div v-if="format == MatFormat.Markdown" class="mat-content-inner" :class="formatClass">
          <paragraph
            v-for="(p, i) in paras"
            :key="i"
            :html="p"
            @select="select"
            :highlight="highlight"
          ></paragraph>
        </div>
        <div v-else-if="format == MatFormat.Poem" class="mat-content-inner" :class="formatClass">
          <table>
            <tr v-for="(ln, i) in content.split('\n')" :key="i">
              <td>{{i}}</td>
              <td class="line" :linenum="i+1">
                {{ln}}
              </td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Paragraph from "./Paragraph.vue";
import { MatFormat } from "@/js/constants.js";
import Markdown from "@/js/markdown/render.js";

// 给markdown文本添加行号，注意要避各种markdown的符号，以免破坏结构。比如```
function addLineNum(text) {
  let lines = text.split("\n");
  let isCode = false;
  for (let i = 0; i < lines.length; ++i) {
    let trimmed = lines[i].trim();
    if (trimmed == "") continue;
    // 暂时忽略代码段，未来考虑为代码段加上行号，但是需要修改markdown解析以识别这种行号
    if (trimmed.startsWith("```")) {
      isCode = !isCode;
      continue;
    }
    if (isCode) continue;
    lines[i] = lines[i] + "[#" + String(i + 1) + "]";
  }
  return lines.join("\n");
}
export default {
  props: ["content", "noScroll", "format"],
  components: {
    Paragraph,
  },
  computed: {
    formatClass() {
      if (this.format == MatFormat.Poem) {
        return "text-content";
      } else {
        return "markdown-content";
      }
    },
  },
  data() {
    return {
      MatFormat: MatFormat,
      paras: [],
      highlight: "",
    };
  },
  watch: {
    content() {
      console.log("content updated!");
      this.parseContent();
    },
  },
  created() {
    if (this.content !== "") {
      this.parseContent();
    }
  },
  methods: {
    // TODO: how to avoid contaminating <pre><code> blocks
    parseContent() {
      if (!this.content) return;
      if (this.format != MatFormat.Markdown) return; //
      // 给每行内容添加行号：
      let content = addLineNum(this.content);
      let md = Markdown.render(content);

      let dp = new DOMParser();
      let dom = dp.parseFromString(md, "text/html");

      let tags = dom.body.children;
      let paras = [];
      for (let i = 0; i < tags.length; ++i) {
        paras.push(tags[i].outerHTML);
      }

      let mdps = paras.map((ln) => ln.trim());
      this.paras = mdps;
    },
    select(data) {
      this.$emit("select", data);
    },
  },
};
</script>

<style lang="stylus" scoped>
.mat-content-pane
  max-height 860px
</style>

<style lang="stylus">
.mat-content-inner
  padding 1vh 0
  & .line
    display inline-block
    padding 2px 0

    &.mark
      border-bottom 1px dashed #A0CFFF

    &.selected
      background-color #C6E2FF
      border-radius 5px

    & span.selected
      background-color #C6E2FF

    .pinyin
      border-bottom 1px dashed #aaa

    .note
      // background-color #C6E2FF
      border-bottom 4px inset #C6E2FF

      &.deep
        // background-color #A6C2CF
        border-bottom 5px inset #A6C2CF

    ruby
      &>rt
        color #888

    .tooltip
      font-size 0.6em
      color #888
      border-radius 4px
      background-color #eee
      padding 2px 6px

      .tooltip-arrow, .tooltip-arrow::before
        position absolute
        width 6px
        height 6px
        z-index -1

      .tooltip-arrow::before
        content ''
        transform rotate(45deg)
        background-color #eee

    .tooltip[data-popper-placement^='top'] > .tooltip-arrow
      bottom -4px

    .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow
      top -4px

    .tooltip[data-popper-placement^='left'] > .tooltip-arrow
      right -4px

    .tooltip[data-popper-placement^='right'] > .tooltip-arrow
      left -4px

  & .line-stat
    font-size 0.8em
    color #409EFF
    padding 5px

  table
    tr
      padding 0.2vh 0
      td
        display table-cell
        text-align left
        vertical-align middle
      
        &.line
          font-size 1.4em
</style>
